<template>
  <div>
    <el-input
      placeholder="请输入内容"
      v-model="listname"
      clearable
      style="width: 360px; height: 40px"
    >
    </el-input>
    <el-button type="primary" @click="search" style="margin-left: 10px"
      >搜索</el-button
    >
    <el-button type="success" @click="handleAdd()">添加留言</el-button>

    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      height="70vh"
      border
    >
      <el-table-column label="用户名">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createdAt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <!-- <el-button size="mini" @click="handleAdd(scope.$index, scope.row)"
            >添加</el-button
          > -->

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <input type="text" placeholder="请输入查询内容" v-model="listname" />
    <button @click="search">查询</button>
    <button @click="searchAll">查询全部</button> -->
    <!-- 模态框 -->

    <el-dialog title="编辑内容" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="编辑留言内容" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="send">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加内容" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.newname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="添加留言内容" :label-width="formLabelWidth">
          <el-input v-model="form.newcontent" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="sendwish">确 定</el-button>
      </div>
    </el-dialog>

    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handlepage"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listname: "",
      flag: true,
      form: {
        name: "",
        content: "",
        role: "",
        id: "",
        newname: "",
        newcontent: "",
        userName: "",
        passWord: "",
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      total: 0,
      tableData: [],
      queryInfo: {
        page: 1,
        rows: 10,
      },
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    // 查询全部
    searchAll() {
      this.flag = true;
      this.getlist();
    },
    // 查询
    search() {
      if (this.listname != "") {
        this.flag = false;
        if (this.flag == false) {
          this.$axios
            .get("http://wish.byesame.com/wish?name=" + this.listname, {
              params: this.queryInfo,
            })
            .then((res) => {
              console.log("查询", res);
              if (res.data.code == 200) {
                let result = res.data.data.list;
                this.tableData = result;
                this.total = res.data.data.count;
              }
            });
        }
        console.log(this.flag);
      } else {
        this.flag = true;
        this.getlist();
      }
      //   this.search();
    },
    // 添加
    handleAdd() {
      this.$router.push("/home/addview");
      // console.log("a,b", a, b);
      // this.$router.push({
      //   path: "/home/addview",
      //   query: {
      //     id: this.form.id,
      //     name: this.form.name,
      //     userName: this.form.userName,
      //     passWord: this.form.passWord,
      //     role: this.form.role,
      //   },
      // });
    },
    //添加确定按钮
    sendwish() {
      this.dialogFormVisible1 = false;
      this.$axios
        .post("http://wish.byesame.com/wish", {
          name: this.form.newname,
          content: this.form.newcontent,
          role: 3,
        })
        .then(() => {});
      this.getlist();
      if (this.flag == false) {
        this.search();
      }
      this.form.newname = "";
      this.form.newcontent = "";
    },
    // 模态框修改
    send() {
      // this.dialogFormVisible = false;
      // this.$axios
      //   .put("http://wish.byesame.com/wish", {
      //     id: this.form.id,
      //     name: this.form.name,
      //     content: this.form.content,
      //   })
      //   .then(() => {});
      // this.getlist();
      // if (this.flag == false) {
      //   this.search();
      // }
    },
    handlepage(v) {
      //切换分页
      //   console.log(v);
      this.queryInfo.page = v;
      this.getlist();
      if (this.flag == false) {
        this.search();
      }
    },
    // 编辑触发模态框
    handleEdit(index, row) {
      console.log(index, row);
      this.form = JSON.parse(JSON.stringify(row));
      // console.log("aaa", this.form);
      this.$router.push({
        path: "/home/addview",
        query: {
          id: this.form.id,
          name: this.form.name,
          content: this.form.content,
        },
      });
    },

    //   删除
    handleDelete(index, row) {
      console.log(index, row);
      console.log("删除内容", row.id);
      this.$axios
        .delete("http://wish.byesame.com/wish", {
          data: {
            id: row.id,
          },
        })
        .then((res) => {
          console.log("删除", res);
          this.$message("删除成功");
          this.getlist();
          if (this.flag == false) {
            this.search();
          }
        });
    },
    // 默认显示列表
    getlist() {
      if (this.flag == true) {
        this.$axios
          .get("http://wish.byesame.com/wish", {
            params: this.queryInfo,
          })
          .then((res) => {
            console.log(res, "res");
            if (res.data.code == 200) {
              let result = res.data.data.list;
              this.tableData = result;
              this.total = res.data.data.count;
            }
          });
      }
    },
  },
};
</script>

<style>
.el-pagination,
.is-background {
  text-align: center;
  float: none;
}
</style>